<template>
  <div class="home-container">
    <div class="login-container">
      <img class="head-icon" src="../assets/logo.png"/>
      <div class="input-group">
        <label>登录账号:</label><input placeholder="请输入账号" v-model="account"/>
      </div>
      <div class="input-group">
        <label>登录密码:</label><input placeholder="请输入密码" v-model="password" type="password"/>
      </div>
      <h5>{{warn}}</h5>
      <div class="login-button">
        <button @click="login" v-on:keyup.enter="login" type="submit">登录</button>
      </div>
      
    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
  data(){
    return{
      account:'',
      password:'',
      warn:'',
      isClicking:false
    }
  },
  methods:{
    async login(){
      if(this.isClicking)
        return
      this.isClicking = true
      if(this.account===''||this.password==''){
        this.warn = '用户名和密码不能为空'
        return setTimeout(()=>{this.warn='';this.isClicking=false},1000)
      }
      let {data:res} = await this.$http.get(`/checkAccount/${this.account}/${this.password}`)
      if(!res.status==1){
        this.warn = '用户名或密码错误'
        return setTimeout(()=>{this.warn='';this.isClicking=false},1000)
      }
      this.isClicking=false
      sessionStorage.setItem('accessToken' ,res.token)
      this.$router.push('/manager')
    }
  },
  mounted(){
    
  }
}
</script>
<style lang="less" scoped>
  .home-container{
    width: 100%;
    height: 100%;
    background-color: rgb(36, 36, 67);
    position: fixed;
    display: flex;
    align-content: center;
    justify-content: center;
    h5{
      height: 10px;
      margin: 0;
      color: #C00000;
    }
    .login-container{
      width: 350px;
      height: 260px;
      background-color: #ffffff;
      border-radius: 20px;
      margin: auto 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .head-icon{
        width: 100px;
        height: 100px;
        border: 2px solid #d4d4d4;
        border-radius: 100px;
        position: relative;
        left: 0px;
        top: -50px;
      }
      .input-group{
        display: flex;
        width: 80%;
        justify-content: center;
        margin-bottom: 15px;
        align-items: center;
        label{
          font-size: 13px;
          margin-right: 5px;
        }
        input{
          border: 1px solid #d4d4d4;
          border-radius: 5px;
          box-sizing: border-box;
          padding: 3px 5px;
          width: 200px;
        }
      }
      .login-button{
        width: 80%;
        display: flex;
        height: 50px;
        justify-content: center;
        align-items: flex-end;
        button{
          border: 0 solid #d4d4d4;
          height: 30px;
          margin: 0 10px;
          width: 120px;
          background-color: rgb(95, 99, 177);
          color: #ffffff;
          border-radius: 10px;
        }
      }
    }
  }
</style>
